<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue路由机制</title>

	</head>
	<body>
		<div id="app">

			<!-- 2.定义路由链接，解析之后变为a标签，to=href -->
			<router-link to="/user">用户</router-link>
			<!-- 3.定义路由填充位，用来展现具体页面（组件） -->
			<router-view></router-view>
		</div>

		<!-- 4.2定义组件模板 -->
		<template id="userTem">
			<div>
				<h1>我是组件内容</h1>
			</div>
		</template>
		<!-- 1.引入js -->
		<script src="../../js/vue.js"></script>
		<script src="../../js/vue-router.js"></script>
		<script>
			/* 4.定义组件 */
			const user = {
				//4.1定义页面
				template: "#userTem"
			}
			//routes写在router上边
			const routes = [
					/* 利用redirect实现路由重定向 */
/* 					{path:"/user",redirect} */
					{path: "/user",component: user}
					]
			//5.创建路由对象，定义路由规则
			const router = new VueRouter({
				//定义路由规则
				routes
			})
			/* 6.将路由对象交给Vue对象管理 */
			const app = new Vue({
				el: "#app",
				router
			})
		</script>


	</body>
</html>
